<!--
 * @Author:
 * @Date: 2022-09-01 20:15:35
 * @LastEditors:
 * @LastEditTime: 2022-09-05 15:15:26
 * @FilePath: \imechos-admin\src\views\anchorManagement\components\checkboxGroup.vue
 * @Description:
 *
 * Copyright (c) 2022 by  , All Rights Reserved.
-->
<template>
  <div :checkboxList="checkboxList">
    <el-checkbox-group v-if="checkList.length" v-model="checkboxGroup" size="small" @change="handleChange" :disabled="disabled">
        <el-checkbox v-for="item in checkboxList" :key="item.id" :label="item.id" border>{{item.name}}</el-checkbox>
    </el-checkbox-group>
    <el-checkbox-group v-else v-model="checkboxGroup2" size="small" @change="handleChange" :disabled="disabled">
        <el-checkbox v-for="item in checkboxList" :key="item.id" :label="item.id" border>{{item.name}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    checkboxList: {
      type: Array,
      default() {
        return []
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    checkList: {
      type: Array,
      default() {
        return []
      }
    },
  },
  watch: {},
  computed: {
    checkboxGroup: {
      get() {
        return this.checkList
      }
    }

  },
  data() {
    return {
      checkboxGroup2: []
    }
  },
  created() {
    // if(this.checkList.length) {
    //   this.checkboxGroup = this.$set(this.checkboxGroup,this.checkList)
    // }
  },
  mounted() {

  },
  methods: {
    handleChange(val) {
      this.$emit('checkboxModel', {id: val})
    }
  },
}
</script>

<style>

</style>
